
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Users, GraduationCap } from "lucide-react";

interface ZoneSelectorProps {
  activeZone: string;
  setActiveZone: (zone: string) => void;
}

export const ZoneSelector = ({ activeZone, setActiveZone }: ZoneSelectorProps) => {
  return (
    <Card className="bg-white dark:bg-gray-800 shadow-sm border">
      <CardHeader>
        <CardTitle className="text-lg font-semibold">Community Zones</CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        <Button 
          variant={activeZone === "student" ? "default" : "outline"}
          className="w-full justify-start gap-2"
          onClick={() => setActiveZone("student")}
        >
          <Users className="w-4 h-4" />
          Student Interaction Zone
        </Button>
        <Button 
          variant={activeZone === "teacher-student" ? "default" : "outline"}
          className="w-full justify-start gap-2"
          onClick={() => setActiveZone("teacher-student")}
        >
          <GraduationCap className="w-4 h-4" />
          Student–Teacher Zone
        </Button>
      </CardContent>
    </Card>
  );
};
